<template>
  <list-page>
    <el-table
      ref="treeTableRef"
      :header-cell-style="{
        background: 'rgb(244, 249, 255)',
        color: '#087CD6',
        fontSize: '14px'
      }"
      :data="treeData"
      style="width: 100%; height: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="orgName" label="机构名称" />
      <el-table-column prop="orgCode" label="机构编码" />
      <el-table-column prop="orgType" label="机构类型">
        <template #default="scope">
          {{ formatJglx(scope.row.orgType) }}
        </template>
      </el-table-column>
      <el-table-column prop="totalNum" label="地区">
        <template #default="scope">
          {{ formatAddress(scope.row, 1) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="是否启用">
        <template #default="scope">
          <span v-if="scope.row.level === 0"></span>
          <el-switch
            v-else
            @change="changeOrgStatus(scope.row)"
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button
            v-if="showAdd(scope.row.level)"
            plain
            type="primary"
            @click="add(scope.row)"
          >
            添加
          </el-button>
          <el-button
            v-if="showAdd(scope.row.level)"
            plain
            type="primary"
            @click="edit(scope.row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pub-dialog
      v-if="editDialogVisible"
      :title="dialogTitle"
      :hasExtraBtn="true"
      v-model:visible="editDialogVisible"
      width="800"
    >
      <editDialog
        :dialog-id="dialogId"
        :dialog-type="dialogType"
        @cancel="editDialogVisible = false"
        @success="addSuccess"
      ></editDialog>
    </pub-dialog>
  </list-page>
</template>
<script setup>
import {
  get_org_tree,
  change_org_status,
  get_org_type_list
} from '@/api/system'
import editDialog from './edit.vue'
import { formatAddress } from '@/utils/index'
const treeData = ref([])
const maps = new Map()
// 计算节点数据
const load = async (row, treeNode, resolve) => {
  maps.set(row.id, { row, treeNode, resolve })
  let { data } = await get_org_tree(row.id)
  row.children = data
  resolve(data)
}
// 刷新节点
const refreshNode = async id => {
  if (id && maps.get(id)) {
    let { row, treeNode, resolve } = maps.get(id)
    load(row, treeNode, resolve)
  }
}

const showAdd = (level, hasChildren) => {
  if (level == 0 || level == 5) {
    return false
  }
  return true
}
//
const treeTableRef = ref(null)
const editDialogVisible = ref(false)
const dialogId = ref('')
const dialogTitle = ref('')
const dialogType = ref('')
const refreshId = ref('')
const add = row => {
  refreshId.value = row.id
  dialogId.value = row.id
  dialogTitle.value = '添加'
  dialogType.value = 'add'
  editDialogVisible.value = true
}
const edit = row => {
  refreshId.value = row.orgPid
  dialogId.value = row.id
  dialogTitle.value = '编辑'
  dialogType.value = 'edit'
  editDialogVisible.value = true
}
const addSuccess = id => {
  editDialogVisible.value = false
  refreshNode(refreshId.value)
}
//
const changeOrgStatus = async val => {
  try {
    await change_org_status(val.id)
  } catch (error) {
    val = !val
    console.log(error)
  }
}
//
const allOrgType = ref([])
const getAllOrgType = async () => {
  let { data } = await get_org_type_list()
  allOrgType.value = data
}
//
const getFirstOrg = async () => {
  let { data } = await get_org_tree('0')
  treeData.value = data
}

//
const formatJglx = orgType => {
  let item = allOrgType.value.find(item => item.code == orgType)
  return item ? item.name : ''
}

onMounted(() => {
  // 获取总机构
  getAllOrgType()
  getFirstOrg()
})
</script>
<style lang="scss" scoped>
.el-table {
  :deep(.el-button) {
    border: 0 solid transparent !important;
    background-color: transparent !important;
    color: #087cd6 !important;
    font-size: 14px !important;
    padding: 6px 0px !important;
    font-family: 'Microsoft YaHei';
  }
}
</style>
